<template>
  <div class="hello" id="flash" :style="{minHeight: currHeight + 'px'}">
    <!-- 导航栏 -->
    <div class="navBox">
      <van-nav-bar
      title="限时特惠"
      left-text="返回"
      right-text="•••"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      />
    </div>
    <!-- 抢购Box -->
    <div class="purchaseBox">
        <div :class= " item.flag ? 'smallBox' : 'smallBoxs'" v-for="(item,index) in items" :key="index">
            <p class="time">{{item.time}}</p>
            <p class="state">{{item.state}}</p>
        </div>
    </div>
    <!-- 大图 -->
    <div class="bigImg">
        <img src="../assets/images/限时特惠/banner.png" alt="">
    </div>
    <!-- 倒计时 -->
    <div class="countDown">
        <span class="leftWriting">抢购中 08：00 开抢</span>
        <span class="rightDeta">
            <van-count-down :time="time" >
                <template #default="timeData">
                    <span>距结束</span>
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                </template>
            </van-count-down>
        </span>
    </div>
    <!-- 抢购商品 -->
    <div class="buyingGoods" v-for="(box,index) in all" :key="index">
        <div class="imgBox">
            <img :src="box.url" alt="">
        </div>
        <div class="cenrerBox">
            <p class="describe">{{box.writing}}</p>
            <p class="price">
                <span class="currentPrice">{{box.currentPrice}}</span>
                <span class="originalPrice">{{box.originalPrice}}</span>
            </p>
        </div>
        <router-link to='/Single_item'>
            <div class="toShopping">
                <p>去购物</p>
                <img src="../assets/images/限时特惠/icon.png" alt="">
            </div>
        </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlashSales',
  data () {
    return {
        items:[
            {
                time:'08:00',
                state:'抢购中',
                flag:false,
            },
            {
                time:'12:00',
                state:'即将开始',
                flag:true,
            },
            {
                time:'16:00',
                state:'即将开始',
                flag:true,

            },
            {
                time:'20:00',
                state:'即将开始',
                flag:true,

            },
            {
                time:'00:00',
                state:'即将开始',
                flag:true,

            },
        ],
        time:24 * 60 * 60 * 1000,
        all:[
            {
                url:require("../assets/images/限时特惠/pic_1.png"),
                writing:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
                currentPrice:'￥200.00',
                originalPrice:'￥2000.00',
            },
            {
                url:require("../assets/images/限时特惠/pic_2.png"),
                writing:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
                currentPrice:'￥200.00',
                originalPrice:'￥2000.00',
            },
            {
                url:require("../assets/images/限时特惠/pic_1.png"),
                writing:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
                currentPrice:'￥200.00',
                originalPrice:'￥2000.00',
            },
            {
                url:require("../assets/images/限时特惠/pic_1.png"),
                writing:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
                currentPrice:'￥200.00',
                originalPrice:'￥2000.00',
            },
            {
                url:require("../assets/images/限时特惠/pic_1.png"),
                writing:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
                currentPrice:'￥200.00',
                originalPrice:'￥2000.00',
            },
            {
                url:require("../assets/images/限时特惠/pic_1.png"),
                writing:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
                currentPrice:'￥200.00',
                originalPrice:'￥2000.00',
            },
            {
                url:require("../assets/images/限时特惠/pic_1.png"),
                writing:'春秋商务休闲加肥加大胖子衬衣肥佬宽松中年正装长',
                currentPrice:'￥200.00',
                originalPrice:'￥2000.00',
            },
        ],
        currHeight: ''
    }
  },
  methods: {
    onClickLeft() {
      
      this.$router.go(-1)
    },
    onClickRight() {
      
    },
  }, 
  mounted(){
      this.currHeight = document.documentElement.clientHeight
      window.onresize = () => {
          this.currHeight = document.documentElement.clientHeight
      }
  }
}
</script>

<style scoped lang='less'>
// 大背景
.hello{
    background: #eee;
    overflow: hidden;
}
// 导航栏
.navBox{
  width: 100%;
  height: 90px;
  position: fixed;
}
.van-nav-bar__content{
  height: 90px;
  background:rgba(48, 48, 50, );
  line-height: 90px;
  .van-nav-bar__text{
    color: #fff;
  }
  .van-nav-bar__title{
    color: #fff;
  }
  .van-icon{
    color: #fff;
  }
}
// 抢购Box
.purchaseBox{
    width: 100%;
    height: 110px;
    display: flex;
    margin-top: 90px;
    .smallBox{
        width: 20%;
        height: 100%;
        color: #fefefe;
        background: #414141;
        border-left:1px solid #111;
        text-align: center;
        overflow: hidden;
        .time{
            margin-top: 10px;
            font-size: 26px;
        }
        .state{
            font-size: 20px;
        }
    }
    // 抢购切换块
    .smallBoxs{
        width: 20%;
        height: 100%;
        color: #fefefe;
        border-left:1px solid #111;
        text-align: center;
        overflow: hidden;
        background: #234597;
        .time{
            margin-top: 10px;
            font-size: 33px;
        }
        .state{
            font-size: 20px;
        }
    }
}
// 大图
.bigImg{
    width: 100%;
    height: 180px;
    img{
        width: 100%;
    }
}
// 倒计时
.countDown{
    width: 100%;
    height: 54px;
    background: #f0f2f5;
    border-bottom: 1px solid #d9d9d9;
    font-size: 24px;
    line-height: 54px;
    padding: 0 20px 0 20px;
    box-sizing: border-box;
    .leftWriting{
        float: left;
    }
    .colon {
    margin: 0 4px;
    color: #000;
    }
    .block {
        border-radius: 12px;
        color: #fff;
        font-size: 12px;
        background-color: #000;      
    }
    .rightDeta{
        float: right;
    }
    .van-count-down{
        line-height: 54px;
    }
}
// 抢购商品
.buyingGoods{
    width: 100%;
    height: 184px;
    background: url(../assets/images/限时特惠/background.png)no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    padding: 30px 25px 0 30px;
    box-sizing: border-box;
    .imgBox{
        width: 120px;
        height: 120px;
        float: left;
        margin-right: 20px;
        img{
            width: 100%;
        }
    }
    .cenrerBox{
        width: 340px;
        float: left;
        .describe{
            font-size: 24px;

        }
        .price{
            // margin-top: 20px;
            line-height: 1;
            .currentPrice{
                font-size: 22px;
                color: #ff4242;
            }
            .originalPrice{
                font-size: 16px;
                color: #999;
                text-decoration: line-through;
            }
        }
    }
    .toShopping{
        font-size: 22px;
        float: right;
        color: #234597;
        margin-top: 20px;
    }
    img{
        width: 25px;
        float: right;
    }
}
</style>
